<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../statics/css/iview.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="../statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="../statics/lib/iview.min.js"></script>
    <script type="text/javascript" src="../statics/lib/jquery.min.js"></script>
    <style>
        .ivu-page {
            float: right;
            margin-top: 30px;

        }
    </style>
</head>
<body>

<div id="role">
    <div>
        <i-button type="info" @click="addMenu">新增</i-button>
        <i-button type="info" @click="updateMenu">修改</i-button>
        <i-button type="info" @click="deleteRoles">删除</i-button>
        <i-table border ref="selection" :columns="roleColumn" :data="roles" @on-select="onSelect" @on-select-cancel="onSelectCancel"></i-table>
    </div>
    <template>
        <Page :total="totalElements" :page-size="pageSize" show-elevator @on-change="changePage"></Page>
    </template>

    <Modal v-model="showList" style="width: 80%;" :styles="{top: '20px'}">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>新增角色</span>
        </p>
        <i-form :model="formItem" :label-width="120" class="iForm">
            <form-item label="名称">
                <i-input v-model="formItem.name"  clearable  placeholder="菜单名称"></i-input>
            </form-item>
            <form-item label="描述">
                <i-input v-model="formItem.description" clearable  type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="描述" ></i-input>
            </form-item>

            <form-item label="资源">
                <Tree :data="menuTree" show-checkbox multiple ref="tree"></Tree>
                <!-- <Tree :data="menuTree" show-checkbox multiple ref="tree"  @on-check-change="onCheckChange" ></Tree>-->
            </form-item>
        </i-form>
        <div slot="footer" style="text-align: center">
            <i-Button type="error" size="large"   @click="showList = false">Back</i-Button>
            <i-Button type="success" size="large"   @click="saveOrUpdate">Save</i-Button>
        </div>
    </Modal>
</div>


<script src="../statics/js/role.js"></script>

</body>
</html>